<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      面向对象的三大特征 
      1. 封装: {}把代码括起来, 形成一个整体 -- 例如 函数的{},对象的{}
      2. 继承: 原型链特征 -- 自己没有的属性, 到原型__proto__中查找
             -- 其他语言中: 爸爸的资源给了儿子用
      3. 多态: 多种状态 -- 同样的方法 在 父子中触发, 效果不同,多种状态
    -->
    <script>
      // 重写: 继承-子可以拥有父类所有的方法和属性, 但是子可以声明 同名的方法和属性, 来代替从父类继承的
      class Father {
        show() {
          console.log('我是父类')
        }
      }
      class Son extends Father {
        // 重写: 父类中的方法, 在子类中声明同名方法, 则使用时优先用自身的重写方法
        show() {
          // 关键词: super  -- 指定调用父类的方法
          // 与this关键词对应,  this代表当前对象
          super.show() //打印出 :  我是父类
          console.log('我是子类')
        }
      }

      var s = new Son()
      console.log(s)

      s.show()
    </script>
  </body>
</html>
